import { Outlet, useNavigate } from "react-router-dom";

const List = () => {
    const navigate = useNavigate();
    const handleClick = (id) => {
        navigate(`/list/detail/${id}`, {
            replace: true,
        });
    };
    return (
        <>
            <div className='list-group'>
                <div className='list-group-item'>
                    <button
                        className='btn btn-danger'
                        onClick={() => handleClick("001")}
                    >
                        触发跳转第一项详情
                    </button>
                </div>
                <div className='list-group-item'>
                    <button
                        className='btn btn-danger'
                        onClick={() => handleClick("002")}
                    >
                        触发跳转第一项详情
                    </button>
                </div>
                <div className='list-group-item'>
                    <button
                        className='btn btn-danger'
                        onClick={() => handleClick("003")}
                    >
                        触发跳转第一项详情
                    </button>
                </div>
            </div>
            <Outlet />
        </>
    );
};

export default List;
